<template>
	<view class="padding32 flex flex_column register">
		<image src="../../static/success.png" mode="" class="logo"></image>
		<p class="title">香城英才网</p>
		<view class="input">
			<input class="" type="number" placeholder="请输入手机号" v-model="form.phone">
			<view class="input-s-div">
				<input class="input-s" type="number" placeholder="请输入验证码" v-model="form.code">
				<text v-show="show" class="input-t" @click="getYan()">{{text}}</text>
				<text v-show="!show" class="input-t">{{count}}s</text>
			</view>
			<input class="" type="text" placeholder="请设置登陆密码" v-model="form.password">
			<input class="" type="text" placeholder="请确认密码" v-model="password">
			<!-- <p class="input-p" v-if="error">{{placeholder}}或密码错误！</p> -->
		</view>
		<view class="login-btn">
			<button class="btn-size btn-b" @click="resect()">注册并登录</button>
			<p class="login-btn-p" @click="userLogin()">直接登录</p>
		</view>

		<!-- 	<view class="login-footer">
			<p class="login-footer-p">登录代表同意 <text>《服务协议》</text> 及 <text>《隐私协议》</text> </p>
			<p class="login-footer-p">登录前请阅读</p>
		</view> -->
	</view>
</template>

<script>
	import {
		person_register,
		person_reg_sms
	}
	from "@/api/login"
	export default {
		data() {
			return {
				text: '获取验证码',
				show: true,
				count: 60,
				timer: null,
				password: "",
				form: {
					password: "",
					code: "",
					phone: ""
				}
			};
		},
		methods: {
			getYan() {
				const TIME_COUNT = 60;
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
					return
				} else if (!this.isValidPhoneNumber(this.form.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: 'error'
					})
					return
				} else {
					console.log("进来了");
					let obj = {
						phone: this.form.phone
					}
					person_reg_sms(obj).then(res => {
						console.log(res.message);
						if (res.code == 200) {
							uni.showToast({
								title: res.message,
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'error'
							})
						}

					})
				}

				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							this.text = "重新获取"
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
			isValidPhoneNumber(phoneNumber) {
				let reg = /^1[3456789]\d{9}$/;
				return reg.test(phoneNumber);
			},

			passwordFun(phoneNumber) {
				let reg = /^[A-Za-z0-9]{4,40}$/;
				return reg.test(phoneNumber);
			},
			resect() {
				console.log(this.isValidPhoneNumber(this.form.phone));
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (!this.isValidPhoneNumber(this.form.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: 'error'
					})
				} else if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码",
						icon: 'error'
					})
				} else if (!this.form.password) {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!this.form.password) {
					uni.showToast({
						title: "请确认密码",
						icon: 'error'
					})
				} else if (!this.passwordFun(this.form.password)) {
					uni.showToast({
						title: "密码格式有误",
						icon: 'error'
					})
				} else if (this.password != this.form.password) {
					uni.showToast({
						title: "两次密码不一致",
						icon: 'error'
					})
				} else {
					person_register(this.form).then(res => {
						console.log(res.data);
						if (res.code == 200) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("personal", JSON.stringify(res.data))
							uni.showToast({
								title: "注册成功",
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/register/perinfo/perinfo"
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'error'
							})
						}

					})
				}

			},
			userLogin() {
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (!this.isValidPhoneNumber(this.form.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: 'error'
					})
				} else if (!this.form.password) {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				}  else if (!this.passwordFun(this.form.password)) {
					uni.showToast({
						title: "密码格式有误",
						icon: 'error'
					})
				} else{
					getPersonalLogin(this.form).then((res) => {
						console.log(res);
						uni.setStorageSync("token", res.data.token)
						uni.setStorageSync("personal", JSON.stringify(res.data))
						if (res.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: 'success'
							})
							console.log(res.data.id_card);
							if (!res.data.id_card) {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/register/perinfo/perinfo"
									})
								}, 500)
							} else {
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/index/index"
									})
								}, 500)
					
							}
						} else {
							uni.showToast({
								title: res.message,
								icon: 'error'
							})
						}
					
					})
				}
				

			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		.logo {
			margin-top: 40px;
			margin-bottom: 22px;
			width: 72px;
			height: 72px;
			border-radius: 12px 12px 12px 12px;
		}

		.title {
			text-align: center;
			font-size: 18px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #303030;
		}

		.input {
			margin-top: 15px;
			width: 100%;
			position: relative;

			input {
				border-bottom: 1px solid #eeeff3;
				height: 60px;
			}

			.input-p {
				line-height: 20px;
				position: absolute;
				// width: 120px;
				height: 20px;
				font-size: 12px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #FF7474;
			}

			.input-s-div {
				width: 100%;
				position: relative;
				right: 0;

				.input-t {
					position: absolute;
					right: 0px;
					top: 20px;
					font-size: 14px;
					font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
					font-weight: 400;
					color: #1C53D9
				}
			}


		}

		.login-btn {
			margin-top: 25px;
			width: 100%;
		}

		.btn-size {
			width: 100%;
			height: 48px;
			margin-bottom: 12px;

		}

		.login-btn-p {
			text-align: center;
			font-size: 14px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #646466;
		}

		.login-footer {
			position: absolute;
			bottom: 46px;

			.login-footer-p {
				font-size: 11px;
				font-family: 'PingFangSC-Regular-Regular, PingFangSC-Regular';
				font-weight: 400;
				color: #646466;
				text-align: center;

				text {
					color: #1C53D9;
				}
			}
		}

	}
</style>
